<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <title>绑定账号</title>
    <div data-th-replace="layout/head"></div>
</head>
<body>
<header class="bar bar-nav">
    <a class="button button-link button-nav pull-left goBack">
        <span class="iconfont icon-fanhui"></span>
    </a>
    <h1 class='title'>绑定账号</h1>
</header>
<div class="content wm-content of order-content" style="background-color: #F6F6F6">
    <article class="page-infinite__wrap exam-page__wrap">
        <div class="page-group">
            <div id="page-infinite-scroll-bottom" class="page page-current">
                <div class="content infinite-scroll native-scroll" data-type='native' data-distance="100">
                    <div class="pl75 pr75 pt5 pb5">
                        <p><span class="fs6 c-888">绑定第三方账号</span></p>
                        <div class="list-block no-mt">
                            <ul class="uAccount-list">
                                <li class="item-content">
                                    <div class="item-inner">
                                        <div class="item-media">
                                            <em class="iconfont icon-winxin c-green" style="font-size: 1rem;"></em>
                                        </div>
                                        <div class="item-title">
                                            <section class="pl5">
                                                微信
                                                <span class="fs4 c-red">（未绑定）</span>
                                            </section>
                                        </div>
                                        <div class="item-after">
                                            <a href="javascript:;" class="button button-fill button-round button-danger watch-live purple-button bindAccountWxBtn">去绑定</a>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <ul class="uAccount-list" style="margin-top: .5rem;">
                                <li class="item-content">
                                    <div class="item-inner">
                                        <div class="item-media">
                                            <em class="iconfont icon-zhifubao c-blue" style="font-size: 1rem;"></em>
                                        </div>
                                        <div class="item-title">
                                            <section class="pl5">
                                                支付宝
                                                <span class="fs4 c-green">（已绑定）</span>
                                            </section>
                                        </div>
                                        <div class="item-after">
                                            <a href="javascript:;" class="button button-fill button-round button-danger watch-live bindAccountZfbBtn">去修改</a>
                                        </div>
                                    </div>
                                </li>
                                <li class="item-content">
                                    <div class="item-inner">
                                        <div class="item-media pr5">&nbsp;</div>
                                        <div class="item-title pl75 pb5">
                                            <section class="fs6 c-666"><span>真实姓名：</span><span>张晓晓</span></section>
                                            <section class="fs6 c-666 pt5"><span>支付宝账号：</span><span>264984825585845</span></section>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <section class="pt5">
                                <span class="fs6 c-888">提示须知：</span>
                                <br>
                                <span class="fs6 c-888">微信和支付宝作为支持提现的第三方个人账户平台，绑定或修改时请输入个人真实有效信息。</span>
                            </section>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>

    <!--绑定成功与否提示 开始-->
    <textarea id="bindAccount-ele" class="hide">
        <div class="pr pt5 pb5">
            <!--成功图标-->
            <aside class="exam-stop-icon applyWithdraw-icon"><span>&nbsp;</span></aside>
            <!--失败图标
            <aside class="exam-stop-icon checkInfo-icon"><span>&nbsp;</span></aside>-->
            <section class="text-center">
                <h3 class="" style="margin-bottom: 0;font-weight: 200;">绑定成功</h3>
                <section class="pt5">
                    <span class="fs6 c-888">您的微信账号已绑定成功</span>
                </section>
            </section>
        </div>
    </textarea>
    <div class="modal-overlay"></div>
    <!--绑定成功提示 结束-->


    <!--绑定微信 表单 开始-->
    <textarea id="bindAccountWx-ele" class="hide">
        <div class="pr pt5 pb5">
            <aside class="exam-stop-icon bindWx-icon"><span>&nbsp;</span></aside>
            <section class="text-center">
                <h3 class="" style="margin-bottom: 0;font-weight: 200;">绑定微信</h3>
                <section class="list-block" style="margin: .5rem 0 0;">
                    <ul>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label fs6">真实姓名：</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="请输入真实姓名">
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </section>
            </section>
        </div>
    </textarea>
    <!--绑定微信 表单 结束-->
    <!--绑定微信下一步 表单 开始-->
    <textarea id="bindAccountNextWx-ele" class="hide">
        <div class="pr pt5">
            <aside class="exam-stop-icon bindWxCode-icon"><span>&nbsp;</span></aside>
            <section class="text-center">
                <h3 class="" style="margin-bottom: 0;font-weight: 200;">微信扫码完成绑定</h3>
                <section class="pt5">
                    <section class="bindEWxCode__wrap">
                        <aside class="preloader"></aside>
                        <img src="https://fimage.268xue.com/upload/0/yzl/common/2018121010/e8a069b413fe9818b30dc047f30fc157.jpg" />
                    </section>
                </section>
            </section>
        </div>
    </textarea>
    <!--绑定微信下一步 表单 结束-->

    <!--绑定支付宝 表单 开始-->
    <textarea id="bindAccountZfb-ele" class="hide">
        <div class="pr pt5 pb5">
            <aside class="exam-stop-icon bindZfb-icon"><span>&nbsp;</span></aside>
            <section class="text-center">
                <h3 class="" style="margin-bottom: 0;font-weight: 200;">绑定支付宝</h3>
                <section class="list-block" style="margin: .5rem 0 0;">
                    <ul>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label fs6">真实姓名：</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="请输入真实姓名">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label fs6">支付宝账号：</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="请输入支付宝账号">
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </section>
            </section>
        </div>
    </textarea>
    <!--绑定支付宝 表单 结束-->

<div data-th-replace="layout/footer"></div>
<script type="text/javascript">

    $(function () {
        bindAccountWxFn()     //绑定微信
        bindAccountZfbFn()    //绑定支付宝
    })

    //绑定成功失败 反馈
    var bindAccountFn = function () {
        var _ele = $('#bindAccount-ele').val();
        $.alert(_ele)
        $('.modal-in').find('.modal-button-bold').text('知道了').attr('style', '');
    }

    //绑定微信
    var bindAccountWxFn = function () {
        var _ele = $('#bindAccountWx-ele').val();
        $(document).on('click', '.bindAccountWxBtn', function () {
            $.confirm(_ele, '',
                function () {
                    //绑定微信下一步
                    bindAccountWxNextFn()
                }
            );
            $('.modal-in').find('.modal-button').css('color', '#bbb');
            $('.modal-in').find('.modal-button-bold').text('下一步').attr('style', '');
        })
    }
    //绑定微信下一步
    var bindAccountWxNextFn = function () {
        var _ele = $('#bindAccountNextWx-ele').val();
        $.alert(_ele, function () {
            bindAccountFn()
        })
        $('.modal-in').find('.modal-button-bold').text('完成').attr('style', '');
    }

    //绑定支付宝
    var bindAccountZfbFn = function () {
        var _ele = $('#bindAccountZfb-ele').val();
        $(document).on('click', '.bindAccountZfbBtn', function () {
            $.confirm(_ele, '',
                function () {
                    bindAccountFn()
                }
            );
            $('.modal-in').find('.modal-button').css('color', '#bbb');
            $('.modal-in').find('.modal-button-bold').text('完成').attr('style', '');
        })
    }

</script>
</body>
</html>
